import React, { useState,useEffect } from "react";
import { Upload, message, Button, Input, TreeSelect, Radio, DatePicker, Space } from "antd";
import { UploadOutlined } from "@ant-design/icons";
import axios from "../../../model/Audio"
const { TreeNode } = TreeSelect;
const { TextArea } = Input;
const { RangePicker } = DatePicker;
const props = {
    name: "file",
    action: "https://www.mocky.io/v2/5cc8019d300000980a055e76",
    headers: {
        authorization: "authorization-text",
    },
    onChange(info: any) {
        if (info.file.status !== "uploading") {
            console.log(info.file, info.fileList);
        }
        if (info.file.status === "done") {
            message.success(`${info.file.name} file uploaded successfully`);
        } else if (info.file.status === "error") {
            message.error(`${info.file.name} 上传失败，暂未链接后端`);
        }
    },
};



export default function NewClass(props:any) {
    const success = () => {
        message.success('添加成功');
      };
      
      const error = () => {
        message.error('添加失败');
      };
      const infoerror=()=>{
          message.error("信息不完整，请补全信息！");
      }
    useEffect(() => {
        let date = new Date();
        let y = date.getFullYear();
        let m: any = date.getMonth() + 1;
        m = m < 10 ? "0" + m : m;
        let d: any = date.getDate();
        d = d < 10 ? "0" + d : d;
        let starttime = y + "-" + m + "-" + d;
        console.log(starttime);
        let endtime="2028-03-14";
        console.log(endtime);
        settype("1");
        setShelfTime(starttime);
        setshelvesTime(endtime);

    }, [])
    

    //课程名称
    let [classname, setclassname] = useState<any>();
    let [treevalue, settreeValue] = useState<any>();
    let [classification, setclassification] = useState<any>();
    let [xuid, setxuid] = useState<any>();
    let [price, setprice] = useState<any>();
    let [num, setnum] = useState<any>();
    let [type, settype] = useState<any>();
    let [ShelfTime, setShelfTime] = useState<any>();
    let [shelvesTime, setshelvesTime] = useState<any>();
    let [img,setimg]=useState<any>("https://www.pmdaniu.com/storages/127806/a2790bc912aee93deaaa4adce2900909-105941/images/%E7%B3%BB%E7%BB%9F%E9%A6%96%E9%A1%B5/u704.png")

    //单选状态码
    let [state, setstate] = useState<any>(1);
    let onChangeRadio = (e: any) => {
        console.log('radio checked', e.target.value);
        setstate(e.target.value);
        if (e.target.value == 1) {
            let date = new Date();
            let y = date.getFullYear();
            let m: any = date.getMonth() + 1;
            m = m < 10 ? "0" + m : m;
            let d: any = date.getDate();
            d = d < 10 ? "0" + d : d;
            let starttime = y + "-" + m + "-" + d;
            console.log(starttime);
            let endtime="2028-03-14";
            console.log(endtime);
            settype("1");
            setShelfTime(starttime);
            setshelvesTime(endtime);
        }else if(e.target.value == 3){
            settype("3");
            setShelfTime("2028-04-24");
            setshelvesTime("2028-10-21");
        }else{
            settype("2")
        }
    };
    //日期解禁
    let [datestate, setdatestate] = useState<any>(true)
    return (
        <div>
            <div
                className="head"
                style={{ backgroundColor: "#fff", padding: "35px", fontSize: "22px" }}
            >
                新增音频课程
            </div>
            <div
                className="body"
                style={{
                    marginTop: "20px",
                    backgroundColor: "#fff",
                    padding: "35px",
                }}
            >
                <p>基础信息</p>
                <div
                    style={{
                        paddingLeft: "60px",
                        paddingTop: "20px",
                        paddingBottom: "20px",
                    }}
                >
                    <div>
                        课程名称:&nbsp;&nbsp;&nbsp;&nbsp;
                        <Input
                            placeholder="请输入课程名称"
                            style={{ width: "200px" }}
                            onChange={(e: any) => {
                                setclassname(e.target.value);
                            }}
                        />
                    </div>
                    <div style={{ marginTop: "20px" }}>
                        课程封面：&nbsp;&nbsp;&nbsp;&nbsp;
                        <Upload {...props}>
                            <Button icon={<UploadOutlined />}>封面图片上传</Button>
                        </Upload>
                    </div>
                    <div style={{ marginTop: "20px" }}>
                        课程分类:&nbsp;&nbsp;&nbsp;&nbsp;
                        <TreeSelect
                            showSearch
                            style={{ width: "200px" }}
                            //   value={treevalue}
                            dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
                            placeholder="Please select"
                            allowClear
                            treeDefaultExpandAll
                            onChange={(e) => {
                                settreeValue(e)
                                console.log(e)
                            }}
                        >
                            <TreeNode value="1" title="一级分类A">
                                <TreeNode value="parent 11" title="二级分类A">
                                    <TreeNode value="111" title="三级分类A" />
                                    <TreeNode value="112" title="三级分类B" />
                                </TreeNode>
                            </TreeNode>
                            <TreeNode value="2" title="一级分类B">
                                <TreeNode value="parent 21" title="二级分类A">
                                    <TreeNode value="211" title="三级分类A" />
                                    <TreeNode value="212" title="三级分类B" />
                                </TreeNode>
                            </TreeNode>
                        </TreeSelect>
                    </div>
                    <div>
                        课程描述：&nbsp;&nbsp;&nbsp;&nbsp;<br></br>
                        <TextArea rows={4} style={{ width: "320px", marginTop: "10px" }} onChange={(e) => {
                            setclassification(e.target.value);
                            console.log(e.target.value)
                        }} />
                    </div>
                    <div style={{ marginTop: "10px" }}>排序号:&nbsp;&nbsp;&nbsp;&nbsp;<Input style={{ width: "200px" }} onChange={(e) => {
                        console.log(e.target.value);
                        setxuid(e.target.value);
                    }}></Input></div>
                </div>
            </div>
            <div style={{ backgroundColor: "#fff", padding: "35px", marginTop: "20px" }}>
                <p>售卖信息</p>
                <div style={{paddingLeft:"60px"}}>
                <div>课程价格：&nbsp;&nbsp;&nbsp;&nbsp;
                    <Input style={{ width: "200px" }} onChange={(e) => {
                        console.log(e.target.value);
                        setprice(e.target.value);
                    }}></Input><Button>元</Button>
                </div>
                <div style={{ marginTop: "10px", marginBottom: "10px" }}>库存：&nbsp;&nbsp;&nbsp;&nbsp;
                    <Input style={{ width: "200px" }} onChange={(e) => {
                        console.log(e.target.value);
                        setnum(e.target.value);
                    }}></Input>
                </div>
                <div>
                    上架时间：&nbsp;&nbsp;&nbsp;&nbsp;
                    <Radio.Group onChange={onChangeRadio} value={state}>
                        <Space direction="vertical">
                            <Radio value={1} onClick={() => {
                                setdatestate(true)
                            }}>立即上架</Radio>
                            <Radio value={2} onClick={() => {
                                setdatestate(false)
                            }}>定时上架&nbsp;&nbsp;&nbsp;&nbsp;
                                <Space direction="vertical" size={12} >
                                    <RangePicker disabled={datestate}
                                        onChange={(value: any) => {
                                            if (value[0]._d && value[1]._d) {
                                                console.log(value[0]._d);
                                                console.log(value[1]._d);
                                                let date = new Date(value[0]._d);
                                                let y = date.getFullYear();
                                                let m: any = date.getMonth() + 1;
                                                m = m < 10 ? "0" + m : m;
                                                let d: any = date.getDate();
                                                d = d < 10 ? "0" + d : d;
                                                let starttime = y + "-" + m + "-" + d;
                                                console.log(starttime);
                                                date = new Date(value[1]._d);
                                                y = date.getFullYear();
                                                m = date.getMonth() + 1;
                                                m = m < 10 ? "0" + m : m;
                                                d = date.getDate();
                                                d = d < 10 ? "0" + d : d;
                                                let endtime = y + "-" + m + "-" + d;
                                                console.log(endtime);
                                                setShelfTime(starttime);
                                                setshelvesTime(endtime);
                                                //   setStartTime(value[0]._d);
                                                //   setEndTime(value[1]._d);
                                            }
                                        }}
                                    />
                                </Space>
                            </Radio>
                            <Radio value={3} onClick={() => {
                                setdatestate(true)
                            }}>暂不上架</Radio>

                        </Space>
                    </Radio.Group>
                </div>
                <div style={{marginTop:"20px"}}>
                    <Button type="primary" onClick={()=>{
                        let id=Math.floor(Math.random()*1000000);
                        let subscribe=0;
                        let checked=false;
                        if(classname==""||classification==""||xuid==""||price==""||type==""||num==""){
                            infoerror();
                            return false
                        }else{
                            let obj={
                                id,
                                subscribe,
                                checked,
                                name:classname,
                                classification,
                                xuid,
                                price,
                                type,
                                ShelfTime,
                                shelvesTime,
                                num,
                                img,
                                category:treevalue
                            }
                            console.log(obj)
                            axios.add(obj).then((res)=>{
                                console.log(res);
                                if(res){
                                    success();
                                    props.history.push("/system/course/audio");
                                }else{
                                    error();
                                }
                            });
                        }
                       
                    }}>提交</Button>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <Button onClick={()=>{
                        props.history.push("/system/course/audio");
                    }}>返回</Button>
                </div>
                </div>
                
            </div>
        </div>
    );
}
